<template>
	<view class="mapLayout">
		<view class="page-section page-section-gap">
			<map id="map"  style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true">
			</map>
		</view>
		<scroll-view scroll-y="true" >
			<view class="mapList">
				<view class="list" v-for="(item,index) in poiAround"  :key="index">
					
					<view class="name" @click="select(item.latitude,item.longitude,index)">
						<view class="text">
							{{item.name}} 
						</view>
						<view class="select">
							<uni-icons type="checkmarkempty" v-if="selectStatus === index"></uni-icons>
						</view>
					</view>
					
					<view class="address">
						{{item.address}}
					</view>
					
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import { mapKey } from "../../utils/common.js";
import amapFile  from "../../utils/amap-wx.130.js";

const myAmapFun = new amapFile.AMapWX({key:mapKey});
const latitude = ref(0);
const longitude = ref(0);
const covers = ref([]);
const poiAround = ref([]);//附近地点
const selectStatus = ref(-1);


onLoad(()=>{
	console.log(1111);
	let locationData = uni.getStorageSync('location');
	latitude.value = locationData.latitude;
	longitude.value = locationData.longitude;
	covers.value = [
		{
			latitude:latitude.value,
			longitude:longitude.value,
			iconPath:"../../static/location.png"
		},
		
	]
	
	
	//获取周边位置
	myAmapFun.getPoiAround({
			  success:(poi)=>{
				 console.log(poi);
				 poiAround.value = poi.markers;
			  },
			  fail:(err)=>{
				  console.log(err);
			  }
			  
	})
	
	
})	

//点击获取最准确位置
	const select = (latitude,longitude,index)=>{
		selectStatus.value = index;
		console.log(latitude)
		console.log(longitude)
		console.log(index)
		
		
		console.log(22222);
		// latitude.value = latitude;
		// longitude.value = longitude;
		console.log(33333);
		let mapC = uni.createMapContext("map", this);
		console.log(mapC);
		mapC.moveToLocation({
			longitude: longitude.value,
			latitude: latitude.value,
		})
		// mapC.mapContext
		// Map.mapContext.moveToLocation({
		// 	
		// })
		// map1.value.mapContext.moveToLocation({
					
		// })
		
		
		// covers.value = [
		// 	{
		// 		latitude:latitude.value,
		// 		longitude:longitude.value,
		// 		iconPath:"../../static/location.png"
		// 	},
			
		// ]
		
		
	}

</script>

<style lang='scss' scoped>
	  .mapLayout{
		  scroll-view{
		  	max-height: 60vh;
		  }
		  .mapList{
			  padding:0 30rpx;
			  .list{
				  margin: 20rpx 0;
				  background: #eee;
				  .name{
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					  font-size:32rpx;
					  font-weight: 600;
				  }
				  .address{
					  font-size:26rpx;
				  }
			  }
		  }
	  }     
</style>
